Redux Toolkit

简介与安装

Redux Toolkit 是一种强大的状态管理工具，特别适合与 React 应用一起使用，以简化和优化状态管理。

Redux Toolkit（RTK）是 Redux 官方推荐的方式，用以构建 Redux 应用。它旨在简化 Redux 应用的设置和管理过程，通过提供更少的模板代码和更多的实用功能。

安装方法：npm install @reduxjs/toolkit react-redux

核心概念：createSlice()

作用：自动创建 reducer 和相关的 action creators 和 action types。

示例：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    incremented: state => state + 1,
    decremented: state => state - 1
  }
});

export const { incremented, decremented } = counterSlice.actions;

export default counterSlice.reducer;

核心概念：configureStore()

作用：封装了 createStore 与 combineReducers 的功能，简化了 store 的配置。

示例：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

核心概念：createAsyncThunk

作用：用于处理异步逻辑和生成 pending/fulfilled/rejected action types。

示例：

import { createAsyncThunk } from '@reduxjs/toolkit';

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

使用 RTK Query

RTK Query 是 Redux Toolkit 的一个数据获取和缓存工具，可以简化数据加载逻辑，并自动管理缓存。

示例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUserById: builder.query({
      query: (id) => `users/${id}`,
    }),
  }),
});

export const { useGetUserByIdQuery } = api;

最佳实践

• 遵守 Immutability：Redux Toolkit 内置了 immer，允许你写“可变”逻辑，而无需担心真实的不可变性。
• 使用 Redux DevTools：配置好后，Redux Toolkit 与 Redux DevTools 无缝集成，方便调试。
• 按需加载数据：使用 RTK Query 的 skip 参数或条件分派来避免不必要的数据请求。

本文作者：Maeiee

本文链接：Redux Toolkit

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！